@charset "utf-8";
.box1 {
    height: 500px;
    background-color: #E01FEC;
    width: 500px;
}
.box1 .item1 {
    height: 100px;
    width: 33.3333%;
    background-color: #7710DB;
    float: left;
}
.box1 .item2 {
    height: 100px;
    width: 33.3333%;
    background-color: #E12023;
    float: left;
}
.box1 .item3 {
    background-color: #D9ED0A;
    width: 33.33%;
    height: 100px;
    float: left;
}
.box2 {
    width: 500px;
    height: 500px;
    background-color: #0D0D0D;
}
.box2 .son {
    height: 100px;
    width: 80%;
    background-color: #0A0A0A;
    margin-left: auto;
    margin-right: auto;

}
.box2 .son .item4 {
    background-color: #CF12E1;
    height: 100px;
    width: 33.3333%;
    float: left;
}
.box2 .son .item5 {
    width: 33.3333%;
    height: 100px;
    background-color: #F71C20;
    float: left;
}
.box2 .son .item6 {
    background-color: #BFF009;
    width: 33.3334%;
    height: 100px;
    float: left;
}
.box3 {
    width: 500px;
    height: 500px;
    background-color: rgba(12,223,233,1.00);
}
.box3 .son1 {
    width: 80%;
    height: 100px;
    background-color: rgba(251,31,35,1.00);
    margin-left: auto;
    margin-right: auto;
}
.box3 .son1 .item7 {
    height: 100px;
    background-color: rgba(46,9,235,1.00);
    width: 100%;
}
.box3 .son1 .item8 {
    width: 50%;
    height: 100px;
    background-color: rgba(235,21,24,1.00);
    float: left;
}
.box3 .son1 .item9 {
    background-color: rgba(204,231,10,1.00);
    width: 50%;
    height: 100px;
    float: left;
}
